<script setup>
import { toRefs, ref, onMounted, watch } from 'vue';
import { CloseBold } from '@element-plus/icons-vue';
import { ElIcon } from 'element-plus';
import AttributeQueryInfoSmallPoint from './AttributeQueryInfoSmallPoint.vue';

const props = defineProps({
  resultFeatures: Object,
});
const { resultFeatures } = toRefs(props);
const emits = defineEmits(['handleCloseQueryLayer']);

const active_nam = ref('属性');
const attributeTable = ref([]);

onMounted(() => {
  attributeTable.value = resultFeatures.value?.tableList ?? [];
});

watch(
  resultFeatures,
  () => {
    attributeTable.value = resultFeatures.value?.tableList ?? [];
  },
  { deep: true },
);

// 关闭窗口

const handleCloseQueryLayer = () => {
  emits('handleCloseQueryLayer');
};
</script>
<template>
  <div class="animate__animated map_attribute_root">
    <header>
      <div class="title_1">
        <p
          :style="
            active_nam == '属性'
              ? 'background:rgba(16, 136, 136,0.6);color:#fff'
              : 'background:rgba(241, 240, 240,0.4);color:#333333'
          "
        >
          属性
        </p>
      </div>

      <ElIcon class="root_icon_close" @click="handleCloseQueryLayer">
        <CloseBold />
      </ElIcon>
    </header>

    <main>
      <!-- 属性查询 -->

      <AttributeQueryInfoSmallPoint v-if="active_nam == '属性'" :attribute-table="attributeTable" />
    </main>
  </div>
</template>

<style scoped lang="scss">
.map_attribute_root {
  position: absolute;
  top: 20px;
  left: 16px;
  z-index: 999;
  width: 480px;
  min-height: 412px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 6px;
  box-shadow: 0px 0px 0.9px rgba(0, 0, 0, 0.02), 0px 0px 2.1px rgba(0, 0, 0, 0.028), 0px 0px 3.9px rgba(0, 0, 0, 0.035),
    0px 0px 6.9px rgba(0, 0, 0, 0.042), 0px 0px 13px rgba(0, 0, 0, 0.05), 0px 0px 31px rgba(0, 0, 0, 0.07);

  header {
    position: relative;
    display: flex;
    justify-content: space-between;
    height: 27px;
    padding: 10px 6px 0 8px;
    border-radius: 6px;

    .title_1 {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 43px;
      margin-left: 16px;
      color: #ffffff;
      font-size: 14px;
      letter-spacing: 1px;
      text-align: center;
      p {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 220px;
        height: 40px;
        color: #0997d4;
        font-size: 16px;
        font-family: Source Han Sans CN, Source Han Sans CN-Medium;
        border-radius: 4px;
        cursor: pointer;
      }
    }
    .root_icon_close {
      position: relative;
      top: -5px;
      right: 17px;
      width: 20px;
      color: #ffffff;
      font-size: 20px !important;
      cursor: pointer;
      :hover {
        color: #108e90;
      }
    }
  }

  main {
    max-height: 753px;
    margin-top: 70px;
    margin-bottom: 30px;
    overflow: auto;
  }
}

//滚动条的宽度
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
//滚动条的滑块
::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 3px;
}
</style>
